<template>
  <div class="seach-box" :class="'calligraphy-select-style' + store.styleInfo.colorType">
    <div class="seach-top">
      <div class="seach-left">
        <div class="select-box">
          <div class="select-title">
            <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">单元</span>
            <t-icon
              name="chevron-down"
              size="20"
              :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
            ></t-icon>
          </div>
          <t-select class="select" v-model="parmas.ModuleId" @change="changeModuleId">
            <t-option v-for="option in datas.moduleList" :key="option.id" :value="option.id" :label="option.name">
            </t-option>
          </t-select>
        </div>
        <div class="select-box">
          <div class="select-title">
            <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"> 类型</span>
            <t-icon
              name="chevron-down"
              size="20"
              :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
            ></t-icon>
          </div>
          <t-select class="select" v-model="parmas.typeId" @change="changetypeId">
            <t-option v-for="item in datas.select3" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
        </div>
        <div class="select-box">
          <div class="select-title">
            <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"> 年代</span>
            <t-icon
              name="chevron-down"
              size="20"
              :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
            ></t-icon>
          </div>
          <t-cascader
            @change="changeageId"
            class="select"
            v-model="parmas.ageId"
            :options="datas.select4"
            valueType="full"
            :keys="{
              value: 'id',
              children: 'children',
              label: 'text',
            }"
          />
        </div>
        <div class="select-box">
          <div class="select-title">
            <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"> 单位</span>
            <t-icon
              name="chevron-down"
              size="20"
              :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
            ></t-icon>
          </div>
          <t-select class="select" v-model="parmas.CompanyId" @change="changeCompanyId">
            <t-option v-for="item in datas.company" :key="item.id" :label="item.name" :value="item.id" />
          </t-select>
        </div>
        <div class="select-box">
          <div class="select-title">
            <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"> 级别</span>
            <t-icon
              name="chevron-down"
              size="20"
              :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
            ></t-icon>
          </div>
          <t-select class="select" v-model="parmas.levelId" @change="changelevelId">
            <t-option v-for="item in datas.select1" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
        </div>
        <span class="reast" @click="reast" :style="{ color: colorList5[store.styleInfo.colorType - 1].shmentColor }"
          >重置</span
        >
      </div>
      <div class="seach-right">
        <div
          class="seach-right-input"
          :class="{
            'seach-right-input1': store.styleInfo.colorType == 1,
            'seach-right-input2': store.styleInfo.colorType == 2,
            'seach-right-input3': store.styleInfo.colorType == 3,
          }"
        >
          <t-input @enter="enter" v-model="value" placeholder="输入展品名称查找"></t-input>
        </div>
        <div
          @click="enter"
          class="right-btn-box"
          :style="{ backgroundColor: colorList5[store.styleInfo.colorType - 1].themeColor }"
        >
          搜索
        </div>
      </div>
    </div>
    <div class="btm-list">
      <div class="list-item" v-if="parmasName.ModuleId && parmasName.ModuleId !== '全部'">
        <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">{{ parmasName.ModuleId }}</span>
        <t-icon
          @click="remove(4)"
          name="close"
          size="20"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        ></t-icon>
      </div>
      <div class="list-item" v-if="parmasName.typeId && parmasName.typeId !== '全部'">
        <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">{{ parmasName.typeId }}</span>
        <t-icon
          @click="remove(1)"
          name="close"
          size="20"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        ></t-icon>
      </div>
      <div class="list-item" v-if="parmasName.ageId && parmasName.ageId !== '全部'">
        <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">{{ parmasName.ageId }}</span>
        <t-icon
          @click="remove(2)"
          name="close"
          size="20"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        ></t-icon>
      </div>
      <div class="list-item" v-if="parmasName.CompanyId && parmasName.CompanyId !== '全部'">
        <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">{{ parmasName.CompanyId }}</span>
        <t-icon
          @click="remove(5)"
          name="close"
          size="20"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        ></t-icon>
      </div>
      <div class="list-item" v-if="parmasName.levelId && parmasName.levelId !== '全部'">
        <span :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }">{{ parmasName.levelId }}</span>
        <t-icon
          @click="remove(3)"
          name="close"
          size="20"
          :style="{ color: colorList5[store.styleInfo.colorType - 1].fontColor }"
        ></t-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { SelectInputValueChangeContext } from '@SelectInput';
import { colorList5 } from '../../data';
import { companysData, modulesData } from '@/api/templates/templates';
import { reactive, ref, watch } from 'vue';
import { treeList } from '@/api/user/user';
import { useProjectStore } from '@/store';

const emit = defineEmits(['seachInfo']);
const value = ref('');
const datas = reactive({
  select1: [], //级别
  select2: [], //来源
  select3: [], //类型
  select4: [], //年代
  company: [], //单位
  moduleList: [], //单元
});
const parmas = ref({
  value: '',
  typeId: 0,
  ageId: 0,
  levelId: 0,
  ModuleId: 1,
  CompanyId: -1,
});
const parmasName = ref({
  typeId: '', //类型名称
  ageId: '', //年代
  levelId: '', //等级
  ModuleId: '', //单元名称
  CompanyId: '', //单位
});
const seachValue = () => {
  parmas.value.value = value.value;
};
const remove = (type: number) => {
  switch (type) {
    case 1:
      parmasName.value.typeId = '';
      parmas.value.typeId = 0;
      break;
    case 2:
      parmasName.value.ageId = '';
      parmas.value.ageId = 0;
      break;
    case 3:
      parmasName.value.levelId = '';
      parmas.value.levelId = 0;
      break;
    case 4:
      parmasName.value.ModuleId = '';
      parmas.value.ModuleId = 1;
      break;
    default:
      parmasName.value.CompanyId = '';
      parmas.value.CompanyId = -1;
      break;
  }
};
const enter = () => {
  parmas.value.value = value.value;
};
const reast = () => {
  value.value = '';
  parmas.value.value = '';
  parmasName.value.typeId = '';
  parmas.value.typeId = 0;
  parmasName.value.ageId = '';
  parmas.value.ageId = 0;
  parmasName.value.levelId = '';
  parmas.value.levelId = 0;
  parmasName.value.ModuleId = '';
  parmas.value.ModuleId = 1;
  parmasName.value.CompanyId = '';
  parmas.value.CompanyId = -1;
};
const initSelect = async () => {
  //初始化所有下拉选项

  let res2 = await treeList(371999507447877); //类型
  let res3 = await treeList(372051821408325); //年代

  // datas.select2 = res1.data;
  datas.select3 = res2.data;
  datas.select4 = res3.data;
};
const initInfo = async () => {
  let { data } = await companysData(localStorage.getItem('projectId'));
  let DataList = await modulesData(localStorage.getItem('projectId'));
  let res = await treeList(371994471206981); //级别
  datas.select1 = res.data;
  datas.moduleList = DataList.data;
  datas.company = data;
};
initInfo();
initSelect();
const store = useProjectStore();

const changeModuleId = (value: any, context: SelectInputValueChangeContext) => {
  parmasName.value.ModuleId = context.selectedOptions[0].label;
};
const changetypeId = (value: any, context: SelectInputValueChangeContext) => {
  parmasName.value.typeId = context.selectedOptions[0].label;
};
const changeageId = (value: any, context: any) => {
  parmasName.value.ageId = context.node.label;
};
const changelevelId = (value: any, context: SelectInputValueChangeContext) => {
  parmasName.value.levelId = context.selectedOptions[0].label;
};
const changeCompanyId = (value: any, context: SelectInputValueChangeContext) => {
  parmasName.value.CompanyId = context.selectedOptions[0].label;
};
watch(
  parmas.value,
  () => {
    emit('seachInfo', parmas.value);
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import '../index.less';
.seach-box {
  width: 100%;
  margin-top: 68px;
}
.seach-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-box {
  position: relative;
  width: 64px;
  height: 28px;
  margin-right: 32px;
}
.seach-left {
  display: flex;
}
.select-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 28px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 28px;
}
.select {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  background: transparent;
  width: 64px;
  height: 28px;
  opacity: 0;
}
.seach-right {
  display: flex;
  width: 410px;
  height: 40px;
}
.right-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 40px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
.seach-right-input {
  width: 332px;
  height: 40px;
  :deep(.t-input) {
    border-radius: 0px;
  }
}
.seach-right-input1 {
  :deep(.t-input) {
    height: 40px;
  }
  :deep(.t-input:hover) {
    border-color: #452e20;
  }
  :deep(.t-input--focused) {
    box-shadow: 0 0 0 1px #452e20;
  }
}
.seach-right-input2 {
  :deep(.t-input) {
    height: 40px;
  }
  :deep(.t-input:hover) {
    border-color: #8c7a57;
  }
  :deep(.t-input--focused) {
    box-shadow: 0 0 0 1px #8c7a57;
  }
}
.seach-right-input3 {
  :deep(.t-input) {
    height: 40px;
  }
  :deep(.t-input:hover) {
    border-color: #353c48;
  }
  :deep(.t-input--focused) {
    box-shadow: 0 0 0 1px #353c48;
  }
}
.btm-list {
  display: flex;
  width: 100%;
}
.list-item {
  display: flex;
  align-items: center;
  height: 32px;
  margin-top: 32px;
  margin-right: 32px;
  span {
    margin-right: 12px;
  }
  :deep(.t-icon) {
    cursor: pointer;
  }
}
.reast {
  cursor: pointer;
  text-decoration: underline;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 28px;
  margin-left: 20px;
}
</style>
